<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="left">
				<text class="time">9:41</text>
			</view>
			<view class="right">
				<view class="signal"></view>
				<view class="wifi"></view>
				<view class="battery"></view>
			</view>
		</view>

		<!-- 头部区域 -->
		<view class="header">
			<view class="left-section">
				<text class="title">购物车</text>
				<view class="location-info">
					<view class="location-icon">📍</view>
					<text class="location-text">湖南省 长沙市 岳麓区...</text>
				</view>
			</view>
			<view class="right-section">
				<text class="manage-btn" @click="toggleManageMode">{{isManageMode ? '完成' : '管理'}}</text>
				<text class="clear-btn" v-if="isManageMode" @click="clearCart">清空</text>
				<view class="more-dots">⋯</view>
				<view class="profile-icon">��</view>
			</view>
		</view>

		<!-- 购物车内容区域 -->
		<scroll-view class="cart-content" scroll-y="true">
			<!-- 第一个店铺 -->
			<view class="store-section">
				<view class="store-header">
					<view class="store-select">
						<view class="checkbox" :class="{ checked: store1.selected }" @click="toggleStore(1)"></view>
						<text class="store-name">店铺名称名称名称名称名称...</text>
					</view>
					<text class="enter-store" @click="goToStore">进入店铺 ></text>
				</view>
				
				<view class="bundle-info">
					<view class="bundle-tag">凑单优惠</view>
					<text class="bundle-text">满128元起订,还差128.00元</text>
					<text class="go-bundle" @click="goToBundle">去凑单 ></text>
				</view>

				<!-- 店铺商品列表 -->
				<view class="product-list">
					<view class="product-item" v-for="(product, index) in store1.products" :key="index">
						<view class="product-select">
							<view class="checkbox" :class="{ checked: product.selected }" @click="toggleProduct(1, index)"></view>
						</view>
						<image class="product-image" :src="product.image" mode="aspectFill"></image>
						<view class="product-info">
							<view class="product-name">{{product.name}}</view>
							<view class="product-tag" :class="product.tagType">{{product.tag}}</view>
							<view class="product-weight">{{product.weight}}</view>
							<view class="product-price">{{product.price}}</view>
							<view class="quantity-selector">
								<button class="quantity-btn minus" @click="decreaseQuantity(1, index)">-</button>
								<text class="quantity-text">{{product.quantity}}</text>
								<button class="quantity-btn plus" @click="increaseQuantity(1, index)">+</button>
							</view>
						</view>
					</view>
				</view>

				<!-- 店铺汇总 -->
				<view class="store-summary">
					<view class="summary-info">
						<text class="total-price">总计:¥{{store1.totalPrice}}</text>
						<text class="product-stats">商品种类:{{store1.productTypes}} 商品数量:{{store1.productCount}}</text>
					</view>
					<button class="checkout-btn" @click="goToCheckout">去结算</button>
				</view>
			</view>

			<!-- 第二个店铺 -->
			<view class="store-section">
				<view class="store-header">
					<view class="store-select">
						<view class="checkbox" :class="{ checked: store2.selected }" @click="toggleStore(2)"></view>
						<text class="store-name">店铺名称名称名称名称名称...</text>
					</view>
					<text class="enter-store" @click="goToStore">进入店铺 ></text>
				</view>

				<!-- 店铺商品列表 -->
				<view class="product-list">
					<view class="product-item" v-for="(product, index) in store2.products" :key="index">
						<view class="product-select">
							<view class="checkbox" :class="{ checked: product.selected }" @click="toggleProduct(2, index)"></view>
						</view>
						<image class="product-image" :src="product.image" mode="aspectFill"></image>
						<view class="product-info">
							<view class="product-name">{{product.name}}</view>
							<view class="product-tag" :class="product.tagType">{{product.tag}}</view>
							<view class="product-weight">{{product.weight}}</view>
							<view class="product-price">{{product.price}}</view>
							<view class="quantity-selector">
								<button class="quantity-btn minus" @click="decreaseQuantity(2, index)">-</button>
								<text class="quantity-text">{{product.quantity}}</text>
								<button class="quantity-btn plus" @click="increaseQuantity(2, index)">+</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部结算栏 -->
		<view class="bottom-checkout">
			<view class="checkout-left">
				<view class="select-all">
					<view class="checkbox" :class="{ checked: allSelected }" @click="toggleSelectAll"></view>
					<text class="select-text">全选</text>
				</view>
				<view class="total-info" v-if="!isManageMode">
					<text class="total-text">合计: ¥{{totalAmount}}</text>
					<text class="discount-text">已优惠: ¥{{discountAmount}}</text>
				</view>
				<view class="manage-info" v-if="isManageMode">
					<text class="manage-text">已选择 {{selectedCount}} 件商品</text>
				</view>
			</view>
			<button class="checkout-btn" v-if="!isManageMode" @click="goToCheckout">去结算({{selectedCount}})</button>
			<button class="delete-btn" v-if="isManageMode" @click="deleteSelected">删除选中</button>
		</view>
	</view>
</template>

<script>
	import Navigation from '@/utils/navigation.js';
	import Auth from '@/utils/auth.js';
	
	export default {
		data() {
			return {
				activeNav: 'cart',
				isManageMode: false,
				allSelected: false,
				store1: {
					selected: false,
					totalPrice: '99.9',
					productTypes: 6,
					productCount: 6,
					products: [
						{
							selected: true,
							image: '/static/apple-bowls.png',
							name: '云南鲜甜青苹果',
							tag: '本地商品',
							tagType: 'local',
							weight: '1份/净肉约2.5kg',
							price: '¥48.8/件',
							quantity: 66
						},
						{
							selected: true,
							image: '/static/apple-bowls.png',
							name: '云南鲜甜青苹果',
							tag: '全国商品',
							tagType: 'national',
							weight: '1份/净肉约2.5kg',
							price: '¥48.8/件',
							quantity: 66
						}
					]
				},
				store2: {
					selected: false,
					products: [
						{
							selected: false,
							image: '/static/apple-bowls.png',
							name: '云南鲜甜青苹果',
							tag: '全国商品',
							tagType: 'national',
							weight: '1份/净肉约2.5kg',
							price: '¥48.8/件',
							quantity: 66
						},
						{
							selected: true,
							image: '/static/apple-bowls.png',
							name: '云南鲜甜青苹果',
							tag: '全国商品',
							tagType: 'national',
							weight: '1份/净肉约2.5kg',
							price: '¥48.8/件',
							quantity: 66
						}
					]
				}
			}
		},
		computed: {
			totalAmount() {
				let total = 0;
				if (this.store1.selected) total += parseFloat(this.store1.totalPrice);
				// 这里可以添加store2的计算逻辑
				return total.toFixed(1);
			},
			discountAmount() {
				// 计算优惠金额，这里可以根据实际业务逻辑调整
				return '0.00';
			},
			totalProductTypes() {
				let types = 0;
				if (this.store1.selected) types += this.store1.productTypes;
				// 这里可以添加store2的计算逻辑
				return types;
			},
			totalProductCount() {
				let count = 0;
				if (this.store1.selected) count += this.store1.productCount;
				// 这里可以添加store2的计算逻辑
				return count;
			},
			selectedCount() {
				let count = 0;
				this.store1.products.forEach(product => {
					if (product.selected) count++;
				});
				this.store2.products.forEach(product => {
					if (product.selected) count++;
				});
				return count;
			}
		},
		onLoad() {
			// 检查登录状态
			this.checkLoginStatus();
		},
		onShow() {
			// 每次显示页面时检查登录状态
			this.checkLoginStatus();
		},
		methods: {
			checkLoginStatus() {
				// 检查是否已登录，如果未登录则跳转到登录页
				if (!Auth.isLoggedIn()) {
					Navigation.goToLogin();
				}
			},
			toggleStore(storeIndex) {
				if (storeIndex === 1) {
					this.store1.selected = !this.store1.selected;
					this.store1.products.forEach(product => {
						product.selected = this.store1.selected;
					});
				} else if (storeIndex === 2) {
					this.store2.selected = !this.store2.selected;
					this.store2.products.forEach(product => {
						product.selected = this.store2.selected;
					});
				}
				this.updateSelectAll();
			},
			toggleProduct(storeIndex, productIndex) {
				if (storeIndex === 1) {
					this.store1.products[productIndex].selected = !this.store1.products[productIndex].selected;
					this.updateStoreSelection(1);
				} else if (storeIndex === 2) {
					this.store2.products[productIndex].selected = !this.store2.products[productIndex].selected;
					this.updateStoreSelection(2);
				}
				this.updateSelectAll();
			},
			updateStoreSelection(storeIndex) {
				if (storeIndex === 1) {
					this.store1.selected = this.store1.products.every(product => product.selected);
				} else if (storeIndex === 2) {
					this.store2.selected = this.store2.products.every(product => product.selected);
				}
			},
			updateSelectAll() {
				this.allSelected = this.store1.selected && this.store2.selected;
			},
			toggleSelectAll() {
				this.allSelected = !this.allSelected;
				this.store1.selected = this.allSelected;
				this.store2.selected = this.allSelected;
				this.store1.products.forEach(product => {
					product.selected = this.allSelected;
				});
				this.store2.products.forEach(product => {
					product.selected = this.allSelected;
				});
			},
			decreaseQuantity(storeIndex, productIndex) {
				if (storeIndex === 1) {
					if (this.store1.products[productIndex].quantity > 1) {
						this.store1.products[productIndex].quantity--;
					}
				} else if (storeIndex === 2) {
					if (this.store2.products[productIndex].quantity > 1) {
						this.store2.products[productIndex].quantity--;
					}
				}
			},
			increaseQuantity(storeIndex, productIndex) {
				if (storeIndex === 1) {
					this.store1.products[productIndex].quantity++;
				} else if (storeIndex === 2) {
					this.store2.products[productIndex].quantity++;
				}
			},
			setActiveNav(nav) {
				this.activeNav = nav;
			},
			goToStore() {
				Navigation.goToList({category: '店铺商品'});
			},
			goToBundle() {
				Navigation.goToList({category: '凑单商品'});
			},
			goToCheckout() {
				Navigation.goToConfirm({
					products: this.getSelectedProducts(),
					totalPrice: this.totalAmount
				});
			},
			getSelectedProducts() {
				// 获取选中的商品列表
				const selectedProducts = [];
				if (this.store1.selected) {
					selectedProducts.push(...this.store1.products.filter(p => p.selected));
				}
				if (this.store2.selected) {
					selectedProducts.push(...this.store2.products.filter(p => p.selected));
				}
				return selectedProducts;
			},
			toggleManageMode() {
				this.isManageMode = !this.isManageMode;
				if (!this.isManageMode) {
					// 退出管理模式时，重置选择状态
					this.allSelected = false;
					this.store1.selected = false;
					this.store2.selected = false;
					this.store1.products.forEach(product => {
						product.selected = false;
					});
					this.store2.products.forEach(product => {
						product.selected = false;
					});
				}
			},
			clearCart() {
				uni.showModal({
					title: '确认清空',
					content: '确定要清空购物车吗？此操作不可恢复。',
					confirmText: '确定清空',
					confirmColor: '#ff4757',
					success: (res) => {
						if (res.confirm) {
							// 清空购物车
							this.store1.products = [];
							this.store2.products = [];
							this.store1.selected = false;
							this.store2.selected = false;
							this.allSelected = false;
							
							uni.showToast({
								title: '购物车已清空',
								icon: 'success'
							});
							
							// 退出管理模式
							this.isManageMode = false;
						}
					}
				});
			},
			deleteSelected() {
				if (this.selectedCount === 0) {
					uni.showToast({
						title: '请选择要删除的商品',
						icon: 'none'
					});
					return;
				}
				
				uni.showModal({
					title: '确认删除',
					content: `确定要删除选中的 ${this.selectedCount} 件商品吗？`,
					confirmText: '确定删除',
					confirmColor: '#ff4757',
					success: (res) => {
						if (res.confirm) {
							// 删除选中的商品
							this.store1.products = this.store1.products.filter(product => !product.selected);
							this.store2.products = this.store2.products.filter(product => !product.selected);
							
							// 更新店铺选择状态
							this.updateStoreSelection(1);
							this.updateStoreSelection(2);
							this.updateSelectAll();
							
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 状态栏样式 */
.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.left, .right {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.time {
	font-size: 28rpx;
	font-weight: bold;
}

/* 头部样式 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}

.left-section {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.location-info {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.location-icon {
	font-size: 24rpx;
}

.location-text {
	font-size: 24rpx;
	color: #666;
}

.right-section {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.manage-btn {
	color: #ff6b35;
	font-size: 28rpx;
	transition: all 0.3s ease;
}

.manage-btn:active {
	opacity: 0.7;
}

.clear-btn {
	color: #ff4757;
	font-size: 28rpx;
	margin-left: 20rpx;
	transition: all 0.3s ease;
}

.clear-btn:active {
	opacity: 0.7;
}

.more-dots {
	font-size: 32rpx;
	color: #666;
}

.profile-icon {
	font-size: 40rpx;
}

/* 购物车内容样式 */
.cart-content {
	flex: 1;
	padding: 20rpx;
}

.store-section {
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
}

.store-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.store-select {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.checkbox {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #ddd;
	border-radius: 50%;
	position: relative;
}

.checkbox.checked {
	background-color: #ff6b35;
	border-color: #ff6b35;
}

.checkbox.checked::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 24rpx;
}

.store-name {
	font-size: 28rpx;
	color: #333;
}

.enter-store {
	color: #ff6b35;
	font-size: 24rpx;
}

.bundle-info {
	display: flex;
	align-items: center;
	gap: 15rpx;
	padding: 20rpx 30rpx;
	background-color: #fff5f0;
}

.bundle-tag {
	background-color: #ff4757;
	color: white;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	font-size: 20rpx;
}

.bundle-text {
	font-size: 24rpx;
	color: #666;
	flex: 1;
}

.go-bundle {
	color: #ff6b35;
	font-size: 24rpx;
}

/* 商品列表样式 */
.product-list {
	padding: 0 30rpx;
}

.product-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.product-item:last-child {
	border-bottom: none;
}

.product-select {
	display: flex;
	align-items: center;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.product-tag {
	display: inline-block;
	padding: 6rpx 12rpx;
	border-radius: 8rpx;
	font-size: 20rpx;
	color: white;
	width: fit-content;
}

.product-tag.local {
	background-color: #ff4757;
}

.product-tag.national {
	background-color: #ffa502;
}

.product-weight {
	font-size: 24rpx;
	color: #666;
}

.product-price {
	font-size: 28rpx;
	color: #ff4757;
	font-weight: bold;
}

.quantity-selector {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.quantity-btn {
	width: 50rpx;
	height: 50rpx;
	border: 1rpx solid #ddd;
	background-color: #fff;
	border-radius: 25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
}

.quantity-text {
	font-size: 26rpx;
	color: #333;
	min-width: 60rpx;
	text-align: center;
}

/* 店铺汇总样式 */
.store-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background-color: #f8f8f8;
}

.summary-info {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.total-price {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: bold;
}

.product-stats {
	font-size: 24rpx;
	color: #666;
}

.checkout-btn {
	background-color: #ff6b35;
	color: white;
	border: none;
	padding: 20rpx 40rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
}

/* 底部结算栏样式 */
.bottom-checkout {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background-color: #fff;
	border-top: 1rpx solid #f0f0f0;
}

.checkout-left {
	display: flex;
	align-items: center;
	gap: 30rpx;
}

.select-all {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.select-text {
	font-size: 28rpx;
	color: #333;
}

.total-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.total-text {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: bold;
}

.discount-text {
	font-size: 24rpx;
	color: #666;
}

.manage-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.manage-text {
	font-size: 26rpx;
	color: #666;
}

.delete-btn {
	background-color: #ff4757;
	color: white;
	border: none;
	padding: 25rpx 50rpx;
	border-radius: 30rpx;
	font-size: 32rpx;
	font-weight: bold;
	transition: all 0.3s ease;
}

.delete-btn:active {
	background-color: #ff3742;
	transform: scale(0.98);
}

.main-checkout-btn {
	background-color: #ff6b35;
	color: white;
	border: none;
	padding: 25rpx 50rpx;
	border-radius: 30rpx;
	font-size: 32rpx;
	font-weight: bold;
}
	</style>